1
00:00:00,570 --> 00:00:09,030
Hello and welcome to this lecture in this little we are going to create the style for the clock using

2
00:00:09,040 --> 00:00:10,240
csx.

3
00:00:11,380 --> 00:00:15,500
So this is what the clock looks like at my end the page.

4
00:00:15,520 --> 00:00:20,560
By the time we're done it will look a little bit prettier.

5
00:00:22,890 --> 00:00:26,280
All right so this is the hastier mail for our clock.

6
00:00:26,290 --> 00:00:34,600
So are we going to use information from here to apply styling when you apply in styling weights here

7
00:00:34,600 --> 00:00:43,540
says aesir says needs to know what select or these are called select or what element it needs to style

8
00:00:43,980 --> 00:00:50,000
the way it does that is using the name of the element as a selector.

9
00:00:50,290 --> 00:00:58,090
So for example if we are going to start the body we we will pick up the body tax or use the body has

10
00:00:58,090 --> 00:01:05,740
The Selecter and then apply the property to properties what we want to do to the body and then the value

11
00:01:05,770 --> 00:01:09,940
is what we have defined to do to the body.

12
00:01:09,940 --> 00:01:17,630
So in this late chaubey apply in styling to the body that would be one selector would be applied as

13
00:01:17,630 --> 00:01:25,300
silenter is deep here which we'll be using the idea which is this banner will be applied as thailin

14
00:01:25,300 --> 00:01:28,150
to the Deve here using the idea of clock.

15
00:01:28,180 --> 00:01:37,450
Ideas are unique and that's it and they will apply some of the Siling with some of other tax.

16
00:01:38,590 --> 00:01:40,500
Okay so I've got some code here.

17
00:01:40,510 --> 00:01:45,170
This is the body so the body here is the selector.

18
00:01:45,430 --> 00:01:51,820
And when you write ncsa syntax once you've specified this selector which is the term you want a style

19
00:01:52,210 --> 00:01:55,410
you need to enclose what you are going to do to it.

20
00:01:55,430 --> 00:01:59,090
Inside this curlee racist that's opening.

21
00:01:59,110 --> 00:02:00,430
And that's the close.

22
00:02:00,850 --> 00:02:06,190
And in between is where you specify what you want to do to the body.

23
00:02:06,190 --> 00:02:12,880
So here I have said I want this property the background colour for the body.

24
00:02:13,060 --> 00:02:14,470
And I'm giving it a value.

25
00:02:14,500 --> 00:02:21,610
So every CEO says Talon was have a property which is what you're trying to do to this electo and then

26
00:02:21,670 --> 00:02:27,740
the value which is the actual result you want to show.

27
00:02:27,850 --> 00:02:33,970
So I'm seeing here I want you to apply a background call or body using this value.

28
00:02:33,970 --> 00:02:36,640
This is the hex value.

29
00:02:36,670 --> 00:02:39,590
It's called X decimal of colours.

30
00:02:39,720 --> 00:02:46,640
And there are different times so if you go to Google and just type it in your browser.

31
00:02:47,140 --> 00:02:49,700
This is a website I use quite a lot.

32
00:02:49,720 --> 00:02:54,670
It's called kolok DASH headstock cam and it gives you various hex values.

33
00:02:54,790 --> 00:03:00,450
So if you're not sure where the actual names of the colours are you can use their hex value the call

34
00:03:00,700 --> 00:03:02,050
X a decimal values.

35
00:03:02,080 --> 00:03:02,760
Okay.

36
00:03:02,830 --> 00:03:09,410
So feel free to look true and use whichever one you want for your own projects.

37
00:03:10,030 --> 00:03:10,480
All right.

38
00:03:10,480 --> 00:03:18,710
I've got a chunk of code here that I have used to apply thailin to the clock.

39
00:03:18,740 --> 00:03:24,250
Dave any way you see the hash tag here it means you are looking at it Dave.

40
00:03:24,310 --> 00:03:26,550
So again the format is the same.

41
00:03:26,590 --> 00:03:29,500
You identify these select in discos.

42
00:03:29,520 --> 00:03:36,070
Is this Deve here called clock where you write and indeed make sure the name does not separate from

43
00:03:36,070 --> 00:03:37,140
the hash tag.

44
00:03:37,180 --> 00:03:38,170
Must be very close.

45
00:03:38,170 --> 00:03:39,980
If not it may not work.

46
00:03:40,060 --> 00:03:44,010
So that's the idea there.

47
00:03:44,050 --> 00:03:46,060
The caller specified the collar.

48
00:03:46,090 --> 00:03:55,150
Anyway you see the hash tag by the values means views x values x decimal values here all right so again

49
00:03:55,150 --> 00:04:04,170
the collar I want the kolob the clock to be that the font size to be this background to be base the

50
00:04:04,220 --> 00:04:14,140
padding padding refers to the space inside while margin refers to this pin to the space outside elements.

51
00:04:14,170 --> 00:04:19,530
This is a with specify that with those Well it bring that up a bit.

52
00:04:19,840 --> 00:04:24,110
Then the font family have assigned Helvetica.

53
00:04:24,580 --> 00:04:28,000
Let me put the font here.

54
00:04:28,090 --> 00:04:35,020
It's always good too when you define a font to have more than one just in case the first one is not

55
00:04:35,020 --> 00:04:42,390
available on the computer that is viewing that serial is quite popular and failed to answer.

56
00:04:42,400 --> 00:04:45,740
Most computers should have that installed.

57
00:04:45,740 --> 00:04:51,120
So always good to have a main font and then a substitute text to line.

58
00:04:51,130 --> 00:04:57,820
I've said I want any text that is used with a clock that it detects the clock will display I want it

59
00:04:57,820 --> 00:05:00,100
to be centred.

60
00:05:00,100 --> 00:05:01,550
That's what all this means.

61
00:05:01,600 --> 00:05:07,030
So feel free to play around with these values you don't have to use mine just use whichever one suits

62
00:05:07,030 --> 00:05:14,170
you but play around with them so that you can see how the beauty of this mail and CSA is that you can

63
00:05:14,170 --> 00:05:20,840
see the result of what you do straight away so if you don't like it you can change it.

64
00:05:21,000 --> 00:05:24,240
Or the padding here use or be an M.

65
00:05:24,350 --> 00:05:29,200
You can also use pixels so you don't have to use them.

66
00:05:30,260 --> 00:05:36,480
All right have added some more chunk of code here from line 14 to twenty eight.

67
00:05:36,620 --> 00:05:39,880
So again this is another idea here too.

68
00:05:40,040 --> 00:05:41,400
For the banner.

69
00:05:41,540 --> 00:05:44,020
This will be the heading for the clock.

70
00:05:44,240 --> 00:05:47,330
And again these are these styling the stylin is the same.

71
00:05:47,330 --> 00:05:49,640
Once you get used to see.

72
00:05:49,700 --> 00:05:51,880
The process is the same.

73
00:05:51,880 --> 00:05:58,670
Again this is the ones in blue here are those are the propertys and then these added value so you separate

74
00:05:58,670 --> 00:06:01,750
the properties from the value with a call on it.

75
00:06:01,880 --> 00:06:07,220
Okay so Lagu that's a colo daskal I want to use font size.

76
00:06:07,250 --> 00:06:12,640
That's the size of the text followed by Now I've set it to 50 pixels again.

77
00:06:12,650 --> 00:06:16,220
Play around with those values and see what you like.

78
00:06:16,310 --> 00:06:21,750
17 lines 17 text to line and want the text to be centred.

79
00:06:21,800 --> 00:06:29,380
Line 8 in the background column I have given it this padding refers to displays inside the element of.

80
00:06:29,390 --> 00:06:31,200
Apply this.

81
00:06:31,270 --> 00:06:31,940
Use e m.

82
00:06:31,940 --> 00:06:34,340
You can also use pixels if you want.

83
00:06:34,340 --> 00:06:38,590
By all means play around where the values and see what suits you.

84
00:06:38,590 --> 00:06:42,980
You can see the results straight away in your browser so if you don't like a voucher you can change

85
00:06:42,980 --> 00:06:43,570
it.

86
00:06:43,610 --> 00:06:45,610
They will have made it 80 percent.

87
00:06:45,620 --> 00:06:48,720
This is 80 percent of the parent container.

88
00:06:49,070 --> 00:06:50,410
So you can use again.

89
00:06:50,440 --> 00:06:53,170
You can use percent or you can use pixels.

90
00:06:53,180 --> 00:07:01,610
Just play around where you use percent tool zoom did percentage from the parent container of that element

91
00:07:02,420 --> 00:07:06,960
line 21 again margin whatever the margin is set to auto.

92
00:07:07,010 --> 00:07:11,680
A tool just or the four sides send it will.

93
00:07:11,690 --> 00:07:14,710
I just them and centre it automatically.

94
00:07:14,750 --> 00:07:18,500
I've also used 10 percent here and then there of value.

95
00:07:18,500 --> 00:07:23,510
So when you apply in margins and padding there are for --.

96
00:07:23,520 --> 00:07:28,420
So you've got the top right bottom hand left.

97
00:07:28,460 --> 00:07:36,710
Thus the ordering which is applied the way I tend to remember it is by using the word trouble and taking

98
00:07:36,710 --> 00:07:42,760
out the vals which are the cause and that will leave you with t top.

99
00:07:43,040 --> 00:07:46,880
Ah right be for bottom left.

100
00:07:46,910 --> 00:07:48,910
That's how I remember it.

101
00:07:48,920 --> 00:07:50,390
This is text transformation.

102
00:07:50,390 --> 00:07:55,460
Upper case it means the test should be in upper case.

103
00:07:55,750 --> 00:08:00,660
Spann basically is used China to test to get that to appear as one.

104
00:08:00,790 --> 00:08:03,920
And I've said to margin as same from the left.

105
00:08:04,090 --> 00:08:11,460
I want it to shift 175 pixels so that's set for the style in 4 o'clock.

106
00:08:11,520 --> 00:08:14,520
Ah just save that if we view that.

107
00:08:14,590 --> 00:08:15,820
Just show a few things.

108
00:08:15,860 --> 00:08:21,000
It will mods display the clock because the javascript has not been applied.

109
00:08:21,020 --> 00:08:25,500
Javascript is what we all need to display a clock.

110
00:08:25,880 --> 00:08:28,380
So this is why the clock looks like.

111
00:08:28,490 --> 00:08:34,400
If I refresh that you should see what it looks like now so this is what it looks like after the styling.

112
00:08:34,700 --> 00:08:40,730
So by the time we apply the javascript The clock will be displayed inside as black.

113
00:08:40,760 --> 00:08:44,620
Here showing but minutes and seconds.

114
00:08:44,760 --> 00:08:47,880
So sit for this picture on the C Ss.

115
00:08:47,960 --> 00:08:50,030
Thank you so much for watching.

116
00:08:50,030 --> 00:08:50,890
Bye for now.